<template>
  <div class="box">
    <div class="SecondTop">
      <div class="top-content">
        <div class="top-content-left">
          <img src="../../../assets/images/Seconds_icon.png" alt="">
          <img src="../../../assets/images/Seconds2_icon.png" alt="">
        </div>
        <div class="top-content-right">
          <h2>{{SecStatus}}</h2>
          <div class="timer">
            <timer :hour="hour"
                   :minute="minute"
                   :second="second"
                   :hourString="hourString"
                   :minuteString="minuteString"
                   :secondString="secondString"
            ></timer>
<!--            <overtime v-if="isShow === 0"></overtime>-->
<!--            <time-one :endTime="starttime" v-if="isShow === 2"></time-one>-->
<!--            <time-two :endTime="starttime" v-if="isShow === 3"></time-two>-->
<!--            <time-three :endTime="starttime" v-if="isShow === 4"></time-three>-->
<!--            <time-four :endTime="starttime" v-if="isShow === 5"></time-four>-->
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="time-list">
        <ul>
          <li v-for="item in timeList" :key="item.name" :class="{seconding: item.type === 1}" @click.stop="handleClick(item.type, item.starttime, item.endtime, item.id)">
            <div>
              <h2>{{item.title}}</h2>
              <p>{{ item.type === 1 ? '抢购中' : item.type === 2 ? '即将开枪' : '已结束' }}</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="list" v-if="list.length > 0">
        <ul>
          <li v-for="item in list" :key="item.pro_id">
            <div class="imgBox">
              <img :src="item.imgurl" alt="">
              <div class="coverContent" v-if="item.type === 0">已结束</div>
              <div class="coverContent" v-if="item.type === 2">即将开抢</div>
            </div>
            <div class="list-MsgBox">
              <p>{{item.product_title}}</p>
              <p>
                <img :src="item.logo_img" alt="">
                <span>{{item.mch_name}}</span>
              </p>
              <label for="price" style="color: red">抢购价</label>
              <p id="price">{{'￥' + item.seconds_price}}</p>
              <p class="old-price">{{item.price}}</p>
              <p @click="panicBuying" class="panic-buying" v-if="item.type === 1">立即抢购</p>
              <p class="over-Time" v-if="item.type === 0">已结束</p>
              <p class="over-Time" v-if="item.type === 2">即将开抢</p>
              <p class="had-buy">已有 <span>{{parseInt(item.max_num) - item.num}}</span> 人抢购成功</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="empty" v-else>
        <a-empty description="该时段暂无秒杀商品哦!" />
      </div>
    </div>
    <a-modal v-model="visible"
             :footer="null"
             width="762px"
             height="400px"
             :centered=true
             :destroyOnClose="true">
      <div style="text-align: center;padding-top: 25px;">
        <img class="modal-code" src="" alt="">
        <h2 style="font-size: 20px!important;
                             font-weight: bold!important;
                             color: #000000!important;
                              padding-top: 20px!important;">
          扫码进入小程序立即抢购
        </h2>
      </div>
    </a-modal>
    <div class="Pagination">
      <a-pagination v-model="current" :total="length" show-less-items />
    </div>
  </div>
</template>

<script>
import timer from './timer'
import api from '../../../api/api'
// import Event from '../../../assets/js/event'
export default {
  name: 'secondcontainer',
  data () {
    return {
      visible: false,
      timeList: [],
      list: [],
      length: 1,
      current: 1,
      isShow: 1,
      starttime: null,
      endtime: null,
      hour: '',
      minute: '',
      second: '',
      promiseTimer: '',
      ramaintime: null,
      SecStatus: '距离结束',
      params: {
        id: null
      }
    }
  },
  mounted () {
    this.getTime()
    this.changeTime(this.$store.state.secondTime.current_time[0].endtime)
    this.outTime()
  },
  components: {
    timer
  },
  methods: {
    getTime () {
      const params = {
        module: 'app_pc',
        action: 'seckill',
        m: 'seckillhome',
        page: this.current,
        id: this.params.id
      }
      api.getSecondTimeAPI(params).then(res => {
        this.timeList = res.data.time_list
        this.list = res.data.list
        this.length = res.data.list.length
        console.log(this.list)
      })
    },
    panicBuying () {
      this.visible = true
    },
    changeTime (val) {
      const endTimeArr = val.split(':')
      var endtime = parseInt(endTimeArr[0]) * 3600 + parseInt(endTimeArr[1]) * 60 + parseInt(endTimeArr[2])
      const curDate = new Date()
      var curHour = curDate.getHours()
      var curMinute = curDate.getMinutes()
      var curSec = curDate.getSeconds()
      var starttime = curHour * 3600 + curMinute * 60 + curSec
      this.ramaintime = endtime - starttime - 0.5
    },
    outTime () {
      if (this.ramaintime > 0) {
        this.hour = Math.floor((this.ramaintime / 3600) % 24)
        this.minute = Math.floor((this.ramaintime / 60) % 60)
        this.second = Math.floor(this.ramaintime % 60)
        this.countDowm()
      }
    },
    countDowm () { // 倒计时
      const self = this
      clearInterval(this.promiseTimer)
      this.promiseTimer = setInterval(function () {
        if (self.hour === 0) {
          if (self.minute !== 0 && self.second === 0) {
            self.second = 59
            self.minute -= 1
          } else if (self.minute === 0 && self.second === 0) {
            self.second = 0
            self.$emit('countDowmEnd', true)
            clearInterval(self.promiseTimer)
          } else {
            self.second -= 1
          }
        } else {
          if (self.minute !== 0 && self.second === 0) {
            self.second = 59
            self.minute -= 1
          } else if (self.minute === 0 && self.second === 0) {
            self.hour -= 1
            self.minute = 59
            self.second = 59
          } else {
            self.second -= 1
          }
        }
      }, 1000)
    },
    formatNum (num) {
      return num < 10 ? '0' + num : '' + num
    },
    handleClick (type, starttime, endtime, id) {
      this.params.id = id
      this.getTime()
      if (type === 0) {
        this.SecStatus = '已结束'
        this.hour = 0
        this.minute = 0
        this.second = 0
      } else if (type === 1) {
        this.SecStatus = '距离结束'
        const currentTime = this.$store.state.secondTime.current_time[0].endtime
        this.changeTime(currentTime)
        this.outTime()
      } else {
        this.SecStatus = '距离开始'
        this.changeTime(starttime)
        this.outTime()
      }
      const a = window.event.target.nodeName
      if (a === 'LI') {
        const children = window.event.target.parentNode.children
        const length = children.length
        for (let i = 0; i < length; i++) {
          children[i].style.backgroundColor = '#ffffff'
          children[i].childNodes[0].childNodes[0].style.color = '#020202'
          children[i].childNodes[0].childNodes[0].style.fontWeight = 'normal'
          children[i].childNodes[0].childNodes[1].style.color = '#020202'
        }
        window.event.target.style.backgroundColor = '#d4282d'
        window.event.target.childNodes[0].childNodes[0].style.color = '#ffffff'
        window.event.target.childNodes[0].childNodes[0].style.fontWeight = 'bold'
        window.event.target.childNodes[0].childNodes[1].style.color = '#ffffff'
      } else {
        const children = window.event.target.parentNode.parentNode.parentNode.childNodes
        const length = children.length
        for (let i = 0; i < length; i++) {
          children[i].style.backgroundColor = '#ffffff'
          children[i].childNodes[0].childNodes[0].style.color = '#020202'
          children[i].childNodes[0].childNodes[0].style.fontWeight = 'normal'
          children[i].childNodes[0].childNodes[1].style.color = '#020202'
        }
        window.event.target.parentNode.parentNode.style.backgroundColor = '#d4282d'
        window.event.target.parentNode.childNodes[0].style.color = '#ffffff'
        window.event.target.parentNode.childNodes[0].style.fontWeight = 'bold'
        window.event.target.parentNode.childNodes[1].style.color = '#ffffff'
      }
    }
  },
  computed: {
    hourString () {
      return this.formatNum(this.hour).split('') // 此处不能用es6 的 [...new Set(str)] ,会被去重
    },
    minuteString () {
      return this.formatNum(this.minute).split('') // 此处不能用es6 的 [...new Set(str)] ,会被去重
    },
    secondString () {
      return this.formatNum(this.second).split('') // 此处不能用es6 的 [...new Set(str)] ,会被去重
    }
  }
}
</script>

<style scoped lang="scss">
  @media screen and (max-width:1273px) {
    .list ul li {
      width: 100%!important;
      height: 45% !important;
      display: flex!important;
      justify-content: center!important;
    }
    .imgBox {
      margin-right: 10%;
    }
    /*.mainContent{*/
    /*  !*min-height: 250px!important;*!*/
    /*  height: 10px!important;*/
    /*}*/
  }
  .box {
    width: 100%;
    min-height: calc( 100vh - 762px );
    padding: -20px 0px 0px 0px!important;
    margin: 0 auto;
    .Pagination {
      width: 100%;
      margin-top: 44px;
      text-align: center;
    }
    .SecondTop {
      width: 100%;
      height: 90px;
      background-color: #f3dfc4;
      /*margin: 0 auto;*/
      .top-content {
        width: 620px;
        height: 90px;
        margin: 0 auto;
        line-height: 90px;
        /*background-color: #ff016f;*/
        .top-content-left {
          float: left;
          img {
            margin-right: 12px;
            &:nth-child(2) {
              width: 152px;
              height: 33px;
              margin-bottom: 11px;
            }
          }
        }
        .top-content-right {
          float: right;
          width: 390px;
          /*background-color: #ffd656;*/
          h2 {
            float: left;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;
            padding-right: 14px;
          }
          .timer {
            float: left;
          }
        }
      }
    }
    .container {
      max-width: 1275px;
      min-width: 780px;
      margin: 0 auto;
      padding-top: 30px;
      /*background-color: #d2ffa8;*/
      .time-list {
        margin-bottom: 25px;
        ul {
          width: 100%;
          height: 69px;
          display: flex;
          .seconding {
            background-color: #d4282d;
            h2 {
              color: #FFFFFF;
              font-size: 22px;
              font-weight: bold;
            }
            p {
              color: white;
            }
          }
          li {
            float: left;
            flex: 1;
            cursor: pointer;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            h2 {
              font-size: 22px;
              font-weight: 400;
              color: #020202;
            }
            p {
              text-align: center;
              font-size: 14px;
              font-weight: 400;
              color: #020202;
            }
          }
        }
      }
      .list {
        overflow: hidden;
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          li {
            width: 628px;
            height: 300px;
            padding-left: 25px;
            /*background-color: #ffffff;*/
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            .imgBox {
              float: left;
              position: relative;
              .coverContent {
                font-size: 18px;
                color: #ffffff;
                line-height: 140px;
                text-align: center;
                position: absolute;
                width: 140px;
                height: 140px;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: block;
                margin: auto;
                border-radius: 140px;
                background-color: rgba(0, 0, 0, 0.4);
              }
            }
            &:nth-child(1) {
              margin-bottom: 20px;
            }
            &:nth-child(2) {
              margin-bottom: 20px;
            }
            img {
              width: 246px;
              height: 253px;
            }
            .list-MsgBox {
              float: left;
              width: 357px;
              height: 253px;
              padding-left: 30px;
              /*background-color: #c2f6ff;*/
              p:nth-child(1) {
                font-size: 16px;
                color: #020202;
              }
              p:nth-child(2) {
                height: 25px;
                margin-top: 8px;
                margin-bottom: 44px;
                /*background-color: #ecffc3;*/
                /*line-height: 20px;*/
                position: relative;
                img {
                  width: 20px;
                  height: 20px;
                }
                span {
                  display: inline-block;
                  position: absolute;
                  height: 20px;
                  top: 2.5px;
                  left: 25px;
                  /*background-color: #ffead9;*/
                }
              }
              label {
                float: left;
                margin-top: 10px;
                margin-right: 3px;
              }
              #price {
                /*float: left;*/
                font-weight: bold!important;
                font-size: 24px!important;
                color: #D4282D!important;
              }
              .old-price {
                text-decoration: line-through;
                color: #888888;
                font-size: 14px;
                font-weight: 400;
              }
              .over-Time {
                outline: 0;
                border: 0;
                width: 180px;
                height: 32px;
                background: #b8b8b8;
                border-radius: 3px;
                font-size: 16px;
                font-weight: 400;
                line-height: 32px;
                text-align: center;
                color: #FFFFFF;
                margin-top: 29px;
                cursor: not-allowed;
              }
              .panic-buying {
                outline: 0;
                border: 0;
                width: 180px;
                height: 32px;
                background: #D4282D;
                border-radius: 3px;
                font-size: 16px;
                font-weight: 400;
                line-height: 32px;
                text-align: center;
                color: #FFFFFF;
                margin-top: 29px;
                cursor: pointer;
              }
              .had-buy {
                width: 180px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                span {
                  color: red;
                }
              }
            }
          }
        }
      }
      .empty {
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>
